<template>
    <s-layout :tabbarshow="false" navbar="normal" :autoBack="true" leftIconColor="#ffffff">

        <view class="max_box">
            <!-- 头部背景盒子 -->
            <view class="background" :style="{backgroundImage:`url(${baseUrl}/uploads/uniapp_image/user/bg_yitoujianli@3x.png`}">
                <!-- 搜索框 -->
                <view class="search_box">
                    <s-search-keyword :placeholder="'搜索感兴趣的岗位'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
            </view>
            <view class="tabs">
                <up-tabs :scrollable="false" :list="state.menulist" @click="menulistclick" :current="state.currentTab" :lineWidth="16" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}" :inactiveStyle="{color: '#606266',transform: 'scale(1)'}"></up-tabs>
            </view>
            <scroll-view :style="{ height:'62vh'}" scroll-y class="area scroll_view" @scrolltolower="PopupScrolltolower">
                <!-- 列表项 -->
                <view v-if="inviteList.length !== 0">
                    <view class="list_item" v-for="item of inviteList" :key="item">
                        <!-- 报名时间 && 报名状态 -->
                        <view class="time_state">
                            <view class="time">报名时间：{{ formatDatetime(item.createtime) }}</view>
                            <view class="state" :class="item.state == 0 ? 'blue' : item.state == 1 ? 'green' : item.state == 2 ? 'red' : item.state == 3 ? 'yellow' : item.state == 5 ? 'gray' : 'blue'">
                                {{ item.state == 0 ? '已报名' : item.state == 1 ? '已录用' : item.state == 2 ? '已拒绝' : item.state == 3 ? '审批中' : item.state == 5 ? '已取消' : '已报名' }}
                            </view>
                        </view>
                        <!-- 列表项头部 -->
                        <view class="item_top" @tap="skipDetails(item.id,item.is_apply)">
                            <view class="title">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/Direct_admission_title.png`" mode="scaleToFill"/>
                                <view class="item_title">
                                    {{ item.title }}
                                </view>
                            </view>
                            <view><u-icon name="arrow-right" color="#6c6f70" size="10" space="8"></u-icon></view>
                        </view>
                        <!-- 薪资 && 距离 -->
                        <view class="salary_box">
                            <!-- 薪资 -->
                            <view class="salary">
                                {{ item.salary_start }}~{{ item.salary_end }}元/{{ item.payment_type == '1' ? '月' : '日' }}
                            </view>
                            <!-- 距离   虚位以待 -->
                            <!-- <view class="distance">道外区·大于30km</view> -->
                        </view>
                        <!-- 结算方式 -->
                        <view class="clearing_form">
                            <view class="Each_way" v-for="(v,k) of item.benefits" :key="k">{{ v }}</view>
                        </view>
                        <!-- 列表项底部 -->
                        <view class="item_bottom">
                            <!-- 头像 -->
                            <view class="head">
                            <image :src="`${baseUrl}${item.company_avatar}`" mode="scaleToFill"/>
                            <!-- 公司 -->
                            <view class="company">
                                <view class="company_name">{{ item.company }}</view>
                                <view class="company_content">{{ item.address }}</view>
                            </view>
                            </view>
                            <!-- 结算按钮 -->
                            <view class="signup_button" v-if="item.state == 0">
                                <view class="sign_up" @tap="cancelRegistration(item.id)">取消报名</view>
                            </view>
                        </view>
                    </view>
                    <!-- 正在加载组件 -->
                    <view v-if="total > 20">
                        <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                </view>
                <!-- 缺醒图 -->
                <view v-else style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
                    <u-empty mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
                    <view class="placeholde"></view>
                </view>
            </scroll-view>
        </view>

    </s-layout>
</template>

<script setup>
    import { onLaunch, onLoad, onShow } from "@dcloudio/uni-app";
    import { ref, reactive } from "vue";
    import { baseUrl } from "@/sheep/config";
    import sheep from '@/sheep';
    import $share from '@/sheep/platform/share';
    import { formatDatetime } from '@/utils/fn.js';

    // 做安全区域样式适配
    const { safeAreaInsets } = uni.getSystemInfoSync();

    

    const state = ref({
        bgColor: '#fff',
        menulist: [
            { name: '全部', value: '' },
            { name: '已报名', value: '0' },
            { name: '已录用', value: '1' },
            { name: '已拒绝', value: '2' },
            { name: '审批中', value: '3' },
            { name: '已取消', value: '5' }
        ],
        currentTab: 0,
        status: ''
    })

    const type = ref('')
    onLoad((option) => {
        state_value.value = option.state

        state.value.currentTab = option.tabs
        type.value = option.type
        getRecruitmentApplyApplyData()
    })

    onShow(() => {

    })

    // 切换tabs
    const state_value = ref()
    const menulistclick = (e) => {
        state_value.value = e.value
        page.value = 1
        inviteList.value = []
        getRecruitmentApplyApplyData()
    }

    // 跳转详情页
    const skipDetails = (id,is_apply) => {
        sheep.$router.go('/subpackage/user/index/registration_details',{
            ids:id,
            is_apply
        })
    }

    // 取消报名
    const cancelRegistration = (id) => {
        let params = {
            ids:id
        }
        sheep.$api.recruitment.getrecruitmentApply(params)
        page.value = 1
        inviteList.value = []
        getRecruitmentApplyApplyData()
    }

    // 搜索感兴趣的职位
    const job_title = ref('')
    const searchKeyWord  = (e) => {
        job_title.value = e
        page.value = 1
        inviteList.value = []
        getRecruitmentApplyApplyData()
    }

    // 加载更多
    const loadmoreRef = ref()
    // 分页
    const PopupScrolltolower = () => {
        if(total.value <= 20) {
            return;
        } 
        loadmoreRef.value.PopupScrolltolower() // 加载更多
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        getRecruitmentApplyApplyData()
    }

    // 封装招聘列表接口
    const inviteList = ref([])
    const current_page = ref()  // 当前页
    const last_page = ref()     // 最后页
    const total = ref()         // 总条数
    const page = ref(1)
    const getRecruitmentApplyApplyData = async () => {
        let params = {
        filter: JSON.stringify({
            state:state_value.value,
            title:job_title.value
        }),
        op: JSON.stringify({
            payment_type: '=',
            title:'LIKE'
        }),
        page:page.value
        }
        const res = await sheep.$api.recruitment.getRecruitmentApplyApplyIndex(params)
        inviteList.value = [...inviteList.value,...res?.data.rows]
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
        total.value = res.data.total
    }
</script>

<style scoped lang="scss">
    :deep(.u-tabs__wrapper__nav__item.data-v-0546c3e4) {
        padding: 0;
        width: 25%;
    }
    
    page {
        width: 100%;
        height: 100%;
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }
    // 头部盒子
    .background {
        height: 460rpx;
        width: 100%;
        background-size: cover; /* 或 contain */
        position: relative;
    }

    // 搜索框
    .search_box {
        position: absolute;
        bottom: 30rpx;
        width: calc(100% - 20rpx);
        padding: 10rpx 10rpx;
    }

    // tabs
    .tabs {
        height: 90rpx;
        background-color: #ffffff;
        margin-bottom: 20rpx;
    }

    // 列表大盒子
    .scroll_view {
        height: 60vh;
    }

    .list_top {
    display: flex;
    height: 110rpx;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f4f4f4;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    // 筛选
    .screen {
        display: flex;
        width: 80rpx;
        height: 56rpx;
        border-radius: 16rpx;
        border: 3rpx solid $uni-color-primary;
        text-align: center;
        line-height: 56rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        margin-left: auto; /* 右侧盒子靠右对齐 */
        margin-right: 10rpx;
        padding-left: 20rpx;
            .icon {
                margin-left: 10rpx;
            }
        }
    }

    // 列表项
    .list_item {
        width: calc(100% - 40rpx);
        border-radius: 16rpx;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 30rpx 20rpx 38rpx 20rpx;
        margin-bottom: 20rpx;
        // 报名时间 && 报名状态
        .time_state {
            height: 54rpx;
            // background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: tap;
            border-bottom: 2rpx solid #EFEFEF;
            margin-bottom: 20rpx;
            // 报名时间
            .time {
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
                margin-left: 20rpx;
            }
            // 报名状态 
            .state {
                font-family: PingFangSC;
                font-weight: 500;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
                margin-right: 20rpx;
            }
        }
        // 列表项头部
        .item_top {
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            display: flex;
            align-items: center;
        }
        image {
            width: 48rpx;
            height: 32rpx;
            margin-top: 5rpx;
        }
        .item_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 5rpx;
        }
        }
        // 薪资 && 距离
        .salary_box {
        margin-top: 20rpx;
        height: 42rpx;
        display: flex;
        justify-content: space-between; /* 左右对齐 */
        line-height: 42rpx;
        padding: 0 30rpx 0 10rpx;
        // 薪资
        .salary {
            font-family: PingFangSC;
            color: #ff6600;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            text-align: center;
        }
        // 距离
        .distance {
            font-family: PingFangSC;
            color: #888888;
            font-weight: 400;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: right;
        }
        }
        // 结算方式
        .clearing_form {
        height: 48rpx;
        display: flex;
        margin-top: 20rpx;
        // 每一种结算方式
        .Each_way {
            height: 100%;
            padding: 0 10rpx;
            border-radius: 4rpx;
            background-color: #f9f9f9;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 400;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            text-align: center;
            line-height: 48rpx;
            margin: 0 10rpx;
        }
        }
        // 列表项底部
        .item_bottom {
        display: flex;
        height: 64rpx;
        margin-top: 20rpx;
        padding-left: 10rpx;
        justify-content: space-between;
        // 头像
        .head {
            height: 64rpx;
            display: flex;
            image {
            width: 64rpx;
            height: 64rpx;
            }
            // 公司
            .company {
            height: 100%;
            margin-left: 20rpx;
            .company_name {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 500;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: left;
            }
            .company_content {
                font-family: PingFangSC;
                color: #999999;
                font-weight: 400;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                width: 50vw;
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
            }
            }
        }

        // 结算按钮
        .signup_button {
            padding-right: 10rpx;
            .sign_up {
                width: 150rpx;
                height: 60rpx;
                border-radius: 32rpx;
                background-color: #EFEFEF;
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 500;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 60rpx;
                border: none;
            }
        }
        }
    }

    // 占位盒子
    .placeholder {
        height: 10rpx;
    }

    // 状态色
    .blue {
        color: $uni-color-primary;
    }
    .green {
        color: green;
    }
    .red {
        color: #FF0000;
    }
    .yellow {
        color: #F77704;
    }
    .gray {
        color: #999999;
    }

</style>

